<template>
  <div class="login-container">
    <div class="login-form-content">
      <div class="route-content flex-normal">
        <i class="route-icon el-icon-back"></i>
        <span class="route-label">商户注册</span>
      </div>
      <svg-icon class="register-bg" icon-class="shop-register"></svg-icon>
      <div class="step-content-info">
        <div class="step-content">
          <template v-if="step == 1">
            <span class="step-title">注册信息</span>
            <div class="form-item">
              <span class="form-label">版本类型：</span>
              <div class="form-val list-content flex-normal">
                <div :class="['item flex-center', params['versionType'] == item.dictValue && 'active']" 
                  @click="tabChange(item, 'versionType')"
                  v-for="item in versionTypeList" :key="item.dictValue">
                  <span class="item-txt">{{ item.dictLabel }}</span>
                </div>
              </div>
            </div>
            <div class="form-item">
              <span class="form-label">商户类型：</span>
              <div class="form-val list-content flex-normal">
                <div :class="['item flex-center', params['shopType'] == item.dictValue && 'active']" 
                  @click="tabChange(item, 'shopType')"
                  v-for="item in shopTypeList" :key="item.dictValue">
                  <span class="item-txt">{{ item.dictLabel }}</span>
                </div>
              </div>
            </div>
            <div class="form-item">
              <span class="form-label">版本名称：</span>
              <div class="form-val list-content flex-normal">
                <div :class="['item flex-center', params['shopTypeId'] == item.id && 'active']" 
                  @click="tabChange(item, 'shopTypeId')"
                  v-for="item in versonList" :key="item.dictValue">
                  <span class="item-txt">{{ item.versionName }}</span>
                </div>
              </div>
            </div>
            <div class="form-item">
              <span class="form-label">商家名称：</span>
              <div class="form-val">
                <el-input v-model="params['shopName']" placeholder="请输入店铺名称"></el-input>
              </div>
            </div>
            <div class="form-item">
              <span class="form-label">商家地址：</span>
              <div class="form-val">
                <el-input readonly v-model="params['shopAddress']" placeholder="请选择店铺地址" @click.native="showDialog('map', 'view')">
                  <el-button slot="suffix" type="text" size="medium" icon="el-icon-search" @click="showDialog('map', 'view')"></el-button>
                </el-input>
              </div>
            </div>
            <div class="form-item">
              <span class="form-label">登录账号：</span>
              <div class="form-val">
                <el-input v-model="params.account" placeholder="请输入登录账号"></el-input>
              </div>
            </div>
            <div class="form-item">
              <span class="form-label">密码：</span>
              <div class="form-val">
                <el-input v-model="params.password" type="password" placeholder="请设置密码"></el-input>
              </div>
              <el-button :loading="boo.pwdLoading" @click="randomPassword" type="text" size="small">生成随机密码</el-button>
            </div>
            <div class="form-btn-content">
              <el-button type="primary" class="form-btn" size="small" @click="getCodeStep1">提交注册信息</el-button>
            </div>
          </template>
          <template v-if="step == 2">
            <span class="step-title">管理员信息</span>
            <div class="form-item flex-normal">
              <span class="form-label">负责人：</span>
              <div class="form-val">
                <el-input v-model="params.head" placeholder="请输入负责人名称"></el-input>
              </div>
            </div>
            <div class="form-item flex-normal">
              <span class="form-label">负责人电话：</span>
              <div class="form-val">
                <el-input v-model="params.headPhone" placeholder="请输入负责人手机号码"></el-input>
              </div>
            </div>
            <div class="form-item flex-normal">
              <span class="form-label">客服电话：</span>
              <div class="form-val">
                <el-input v-model="params.csTel" placeholder="请输入客服电话"></el-input>
              </div>
            </div>
            <div class="form-btn-content">
              <el-button :loading="boo.isSubmit" type="primary" class="form-btn" size="small" @click="submit">提交验证</el-button>
            </div>
          </template>
        </div>
        <div class="info-content flex-column">
          <svg-icon class="login-icon" icon-class="forget-pwd"></svg-icon>
          <div class="info-btn-content flex-between">
            <el-button type="text" size="small" class="btn-txt" @click="jumpPage('/login')">我有账户，立即登录</el-button>
            <el-button type="text" size="small" class="btn-txt" @click="jumpPage('/forget-pwd')">忘记密码</el-button>
          </div>
        </div>
      </div>
    </div>
    <dialog-normal
      ref="dialog-map"
      :dialog-prop="{
        title: '选择位置',
        width: '60%',
        submit: '确定',
        close: '取消'
      }"
      @normal-submit="submitDialog('map', shopInfo)">
      <template #dialog-content v-if="$refs[`dialog-map`] && $refs[`dialog-map`].showDialog">
        <draw-map v-model="shopInfo"/>
      </template>
    </dialog-normal>
  </div>
</template>

<script>
import { register, getVersionTypeList, getShopTypeList, getVersonList } from "@/api/register";
import { randomPassword } from '@/api/userManage/admin-shop'
import { isPhoneNum } from '@/utils/tools.js'

export default {
  name: "Register",
  components: {
    "dialog-normal": () => import("@/rhComponents/dialog/normal-dialog"),
    'draw-map': () => import('@/rhComponents/map/draw-map.vue')
  },
  data() {
    return {
      shopInfo: {},
      step: 1,
      boo: {
        pwdLoading: false,
        isSubmit: false
      },
      params: {},
      versionTypeList: [],
      shopTypeList: [],
      versonList: []
    };
  },
  async mounted(){
    let _self = this
    await _self.queryVersionTypeList()
    await _self.queryShopTypeList()
    await _self.queryVersonList()
  },
  methods: {
    tabChange(item, key){
      let _self = this
      if(key == 'versionType' || key == 'shopType'){
        _self.$set(_self.params, key, item.dictValue)
        _self.queryVersonList()
      }else{
        _self.$set(_self.params, key, item.id)
      }
    },
    async randomPassword(){
      let _self = this
      _self.boo.pwdLoading = true
      await randomPassword().then(res => {
        let {msg} = res
        _self.$set(_self.params, 'password', msg)
      }).finally(() => {
        _self.boo.pwdLoading = false
      })
    },
    async queryVersionTypeList(){
      let _self = this
      await getVersionTypeList().then(res => {
        _self.versionTypeList = res.data
        let item = res.data[0] || {}
        _self.$set(_self.params, 'versionType', item.dictValue)
      })
    },
    async queryShopTypeList(){
      let _self = this
      await getShopTypeList().then(res => {
        _self.shopTypeList = res.data
        let item = res.data[0] || {}
        _self.$set(_self.params, 'shopType', item.dictValue)
      })
    },
    async queryVersonList(){
      let _self = this
      let params = {
        shopType: _self.params['shopType'], 
        versionType: _self.params['versionType']
      }
      await getVersonList(params).then(res => {
        _self.versonList = res.data
        let item = res.data[0] || {}
        _self.$set(_self.params, 'shopTypeId', item.id)
      })
    },
    async getCodeStep1(){
      let _self = this, {shopTypeId, account, password, shopName, shopAddress} = this.params
      if(!shopTypeId || shopTypeId == '') return _self.$message.error('请选择版本')
      if(!shopName || shopName == '') return _self.$message.error('请设置商家')
      if(!shopAddress || shopAddress == '') return _self.$message.error('请设置商家地址')
      if(!account || account == '') return _self.$message.error('请设置登录账号')
      if(!password || password == '') return _self.$message.error('请设置密码')
      _self.step = 2
    },
    async submit(){
      let _self = this, {head, headPhone, csTel, account} = this.params
      if(!head || head == '') return _self.$message.error('请设置负责人')
      if(!isPhoneNum(headPhone)) return _self.$message.error('手机号格式错误')
      if(!isPhoneNum(account)) return _self.$message.error('登录账号必须是手机号')
      if(!csTel) return _self.$message.error('客服电话不能为空')
      _self.boo.isSubmit = true
      this.$store.dispatch("appRegister", this.params).then(() => {
        this.$router.push({ path: "/" }).catch(() => { });
      }).finally(() => {
        _self.boo.isSubmit = false
      })
    },
    jumpPage(path){
      this.$router.replace({path})
    },    
    // 事件集合 -- 转发
    actionsMaps(ref, acion, row){
      let _self = this
      let actionsMap = () => {
        return new Map([
          [{ref: 'map', acion: 'view:show'}, ()=>{              
            _self.$nextTick(() => {
              _self.$refs[`dialog-${ref}`].showDialog = true
            })
          }],
          [{ref: 'map', acion: 'submit'}, ()=>{
            if(!row || !row.desc || !row.latlng){
              _self.$refs[`dialog-${ref}`].loading = false;
              return _self.$message.error('请选择店铺地址')
            }
            _self.$set(_self.params, 'shopAddress', row.desc)
            _self.$set(_self.params, 'latitudeAndLongitude', row.latlng)           
            _self.$nextTick(() => {
              _self.$refs[`dialog-${ref}`].loading = false;
              _self.$refs[`dialog-${ref}`].showDialog = false
            })
          }]
        ])
      }
      let actions = [...actionsMap()].filter(([key,value])=>(key.ref == ref && key.acion == acion))
      actions.forEach(([key,value])=>value.call(this))
    },
    showDialog(ref, type, row) {
      let _self = this;
      if (_self.$refs[`${ref}-form`]) {
        this.resetForm(`${ref}-form`);
      }
      _self.$nextTick(() => {
        _self.actionsMaps(ref, `${type}:show`, row)
      })
    },
    submitDialog(ref, row) {
      let _self = this;
      if(this.$refs[`${ref}-form`]){
        this.$refs[`${ref}-form`].validate((valid) => {
          if (valid) {
            _self.$refs[`dialog-${ref}`].loading = true
            _self.actionsMaps(ref, `submit`, row)
          } else {
            _self.$refs[`dialog-${ref}`].loading = false;
            return false;
          }
        });
      }else{
        _self.$refs[`dialog-${ref}`].loading = true
        _self.actionsMaps(ref, `submit`, row)
      }
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.login-container {
  display: flex;
  height: 100vh;
  flex-direction: column;
  background-color: #fff;
  padding: vh(120) vw(200) vh(100) vw(200);
  .register-bg{
    margin-top: 100px;
    display: block;
    width: 100%;
    height: auto;
  }
}
.login-form-content {
  position: relative;
  align-items: flex-start;
  flex: 1;
  border-radius: vh(80);
  box-shadow: vh(20) vh(-20) 0 vh(10) rgba(174, 173, 173, 0.09);
  .route-content {
    position: absolute;
    left: 100px;
    top: 50px;
    font-size: 24px;
    font-weight: 500;
    color: #3D3D3D;
    cursor: pointer;
    .route-label{
      margin-left: 10px;
    }
  }
  .step-content-info{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 30px;
    // align-items: center;
  }
  .step-content{
    // padding: 120px 0 0 100px;
    .step-title{
      font-size: 16px;
      font-weight: 500;
      color: #0003AA;
      padding: 30px 0;
      display: block;
    }
    .step-txt{
      margin-bottom: 15px;
      color: #666666;
      font-size: 12px;
    }
    .form-item ::v-deep{
      margin-bottom: 15px;
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 20px;
      .el-input__inner{
        border: none;
      }
      .form-label{
        font-size: 13px;
        color: #3E3E3E;
        width: 120px;
      }
      .form-val{
        border-bottom: 1px solid #D8D8D8;
        width: 300px;
        &.list-content{
          border-bottom: none;
          width: auto;
          .item{
            height: 28px;
            padding: 0 20px;
            background-color: #ECECEC;
            border-radius: 3px;
            margin-left: 18px;
            margin-bottom: 18px;
            cursor: pointer;
            transition: .2s;
            &:first-child{
              margin-left: 0;
            }
            &.active{
              background-color: #D2F4FF;
            }
            .item-txt{
              font-size: 16px;
              color: #3D3D3D;
            }
          }
        }
      }
    }
    .form-btn-content{
      width: 100%;
      margin-top: 30px;
      .form-btn{
        display: block;
        width: 100%;
      }
    }
  }
  .info-content{
    position: relative;
    align-items: center;
    .info-btn-content{
      width: 100%;
      margin-top: 30px;
      padding-left: 30px;
    }
    .login-icon{
      right: vw(223);
      top: vh(233);
      width: vw(323);
      height: vh(230);
    }
  }
}
</style>
